<script lang="ts">
export default {
    data() {
        return {
            cur_index:1,
        }
    },
    methods:{
        on_item_click(event:MouseEvent){
            // console.log('item clicked')
            let el:HTMLElement=event.target
            console.dir(el)
            while (el) {
                if (el.classList.contains('nav-item')) {
                    // console.log('nav item clock')
                    let index=el.getAttribute('index')
                    this.cur_index=+index
                    console.log('nav to:'+index)
                    this.$emit('navigateTo',index)
                    return
                }else{
                    el=el.parentElement
                }       
            }
        }
    },
    emits:['navigateTo'],

    mounted(){
        // console.log('attrs')
        // console.dir(this.$attrs)
        this.cur_index=+this.$attrs['default']
    }
    
}
</script>

<template>
    <div class="nav-bar" >
        <div class="nav-item" index="1" :class="{active:cur_index==1}" @click="on_item_click">
            <a>搜索漫画</a>
        </div>
        <div class="nav-item" index="2" :class="{active:cur_index==2}" @click="on_item_click">
            <a>我的书架</a>
        </div>
        <div class="nav-item" index="3" :class="{active:cur_index==3}" @click="on_item_click">
            <a>下载管理</a>
        </div>
        <div class="nav-item" index="4" :class="{active:cur_index==4}" @click="on_item_click">
            <a>应用设置</a>
        </div>
    </div>
</template>

<style scoped lang="scss">
    .nav-bar{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    .nav-item{
        height: 50px;
        width: 80%;
        border: 2px solid hsl(180, 60%, 50%);
        color: hsl(180, 60%, 50%);
        border-radius: 5px;
        margin-top: 10px;
        font-size: 20px;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
        &:hover{
            color: #333;
            background-color: hsl(180, 60%, 50%);
        }
        &.active{
            color: #333;
            background-color: hsl(180, 60%, 50%);
        }
    }

</style>
